<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">

    用户名：<input type="text" v-model.lazy.trim="user.username"><br>
    age: <input v-model.number="user.age" type="text">
    描述：<textarea name="" id="" cols="30" rows="10" v-model.trim="user.desc"></textarea>
    <br>
    城市：
    <input type="checkbox" v-model="user.cities" true-value="beijing" false-value="bj" name="" id="">北京
    <input type="checkbox" v-model="user.cities" true-value="shanghai"
    false-value="sh"
    name="" id="">上海
    <input type="checkbox" v-model="user.cities" false-value="ty" true-value="taiyuan" name="" id="">太原
    <br>
    性别：
    <input type="radio" name="sex" value="nan" v-model="user.sex" id="">
    <input type="radio" name="sex" value="nv" v-model="user.sex" id="">
    <br>
    爱好：
    <select name="" id="" multiple v-model="user.instrects">
      <!-- <option value="1">吃饭</option>
      <option value="2">睡觉</option>
      <option value="3">打豆豆</option> -->

      <option v-for="item in list" :value="item.value">{{item.text}}</option>

    </select>
    <button @click="handleSubmit">提交</button>
  </div>
  <script>

    var vm = new Vue({
      el: "#app",
      data: {
        list:[{text:"吃饭",value:1},{text:"睡觉",value:2},{text:"打豆豆",value:3}],
        user: {
          username: "",
          age:20,
          desc: "",
          cities: ['beijing'],
          sex: 'nan',
          instrects:[2,3]
        }

      },
      methods: {
        handleSubmit() {
          // console.log(this.user.username)
          console.log(JSON.stringify(this.user))
        }
      }
    })

  </script>

</body>

</html>